<ng-container *ngIf="layerId">
    <div class="features-container">
        <div class="title">
            <div class="layerName" [title]="layerName">
                {{layerName}}
            </div>
            <div class="operations">
                <div class="default-operations" *ngIf="!editing">
                    <i nz-icon nzType="filter" style="font-size:16px" nzTheme="outline" (click)="openFilter()"></i>
                    <i nz-icon nzType="edit" style="font-size:16px" nzTheme="outline" (click)="enterEditing()"></i>
                </div>
                <div class="save-button" *ngIf="editing">
                    <button nz-button nzType="primary" nzSize="small" [nzLoading]="saveLoading" (click)="saveModify()">保存</button>
                </div>
            </div>
        </div>
        <div class="sql-options" *ngIf="sqlString">
            <span class="option">当前筛选条件：</span>
            <span>{{sqlString}}</span>
        </div>
        <div class="features-table">
            <!-- TODO nzScroll 导致表头行固定，且列没对齐，待处理-->
            <nz-table nzSize="small"
                      nzShowPagination
                      nzShowSizeChanger
                      [nzFrontPagination]="false"
                      [nzData]="features"
                      [nzBordered]="true"
                      [nzTotal]="total"
                      [(nzPageSize)]="size"
                      [(nzPageIndex)]="current"
                      [nzShowQuickJumper]="true"
                      (nzPageIndexChange)="getFeatures()"
                      (nzPageSizeChange)="getFeatures()"
                      [nzLoading]="getLoading">
                <thead (nzSortChange)="sortFeatures($event)" nzSingleSort>
                <tr>
                    <th></th>
                    <th *ngFor="let head of heads"
                        nzShowSort
                        [nzSortKey]="head">
                        {{head === 'fid' ? 'FID' : head}}
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let feature of features" #rowElement [ngClass]="{selected : selectedFid === feature?.fid}">
                    <td>
                        <i nz-icon (click)="selectFeature(feature)" class="caret-right" nzType="caret-right"
                           nzTheme="outline"></i>
                    </td>
                    <td *ngFor="let key of heads">
                        <div class="editable-cell" *ngIf="editFid !== feature?.fid; else editTpl">
                            <div class="editable-cell-value-wrap" [ngClass]="{'pointer-td': editing && key !== 'fid'}"
                                 (click)="startEdit(feature, $event, rowElement)">
                                {{feature[key]}}
                            </div>
                        </div>
                        <ng-template #editTpl>
                            <ng-container *ngIf="key === 'fid'; else editInputTpl">
                                {{feature[key]}}
                            </ng-container>
                            <ng-template #editInputTpl>
                                <input type="text" nz-input [(ngModel)]="feature[key]"/>
                            </ng-template>
                        </ng-template>
                    </td>
                </tr>
                </tbody>
            </nz-table>
        </div>
    </div>
    <kylin-feature-filter *ngIf="filterVisible"
                          [(isVisible)]="filterVisible"
                          [layerId]="layerId"
                          [allProps]="heads"
                          (filterDone)="reGetFeatures($event)"
    ></kylin-feature-filter>
</ng-container>
